<template>
  <div class="feedback">
    <el-container>
      <el-header class="header" height="120px">
        <div class="logo">
          <img src="../../assets/images/logo-title.png" alt="logo"/>
        </div>
        <div class="nav">
          <el-menu class="menu" router mode="horizontal">
            <template v-for="item in menu">
              <el-menu-item
                  v-if="!item.subs"
                  :key="item.index"
                  :index="item.index"
              >{{ item.label }}
              </el-menu-item
              >
              <el-submenu v-else :key="item.index" :index="item.index">
                <template #title>{{ item.label }}</template>
                <el-menu-item
                    v-for="subItem in item.subs"
                    :key="subItem.index"
                    :index="subItem.index"
                >
                  {{ subItem.label }}
                </el-menu-item>
              </el-submenu>
            </template>
          </el-menu>
        </div>
        <div class="user"></div>
      </el-header>
      <el-container>
        <el-aside width="250px">
          <el-menu
              :uniqueOpened="true"
              default-active="2"
              class="el-menu-vertical-demo"
              background-color="rgb(250,249,250)"
              text-color="black"
              active-text-color="rgb(255, 0, 106)"
              router
          >
            <el-submenu
                :index="' ' + item1.order"
                v-for="item1 in menuData"
                :key="item1.path"
            >
              <template #title>
                <i class="el-icon-location"></i>
                <span>{{ item1.name }}</span>
              </template>
              <el-menu-item
                  class="menuItem"
                  @click="clickMenuItem"
                  v-for="item2 in item1.children"
                  :key="item2.path"
                  :index="item2.path"
              >
                <i class="el-icon-location"></i>
                <span>{{ item2.name }}</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
          <!-- <el-menu
            :uniqueOpened="true"
            default-active="2"
            class="el-menu-vertical-demo"
            background-color="rgb(250,249,250)"
            text-color="black"
            active-text-color="rgb(255, 0, 106)"
            router
          >
            <el-submenu index="1">
              <template #title>
                <i class="el-icon-location"></i>
                <span>网站使用帮助</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="menuhelp">网站功能介绍</el-menu-item>
                <el-menu-item index="menuhelp2">疑难问题帮助</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu> -->
        </el-aside>
        <el-main>
          <el-container>
            <el-header>
              <div class="left">
                <i class="el-icon-s-operation"></i>帮助中心
              </div>
              <div class="right">
                <el-breadcrumb separator="/">
                  <el-breadcrumb-item :to="{ path: '/feedback' }"
                  >首页
                  </el-breadcrumb-item
                  >
                  <el-breadcrumb-item><a href="/"></a></el-breadcrumb-item>
                </el-breadcrumb>
              </div
              >
            </el-header>
            <el-main>
              <router-view/>
            </el-main>
          </el-container>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeMenu: '',
      indexBreadcrumbs: [],
      breadcrumbListData: [],
      menuData: [
        {
          name: '网站使用帮助',
          order: '1',
          path: '',
          children: [
            {
              path: 'menuhelp',
              name: '网站功能介绍',
            },
            {
              path: 'menuhelp2',
              name: '疑难问题帮助',
            },
          ],
        },
        {
          name: 'CATKey相关问题',
          order: '2',
          path: '',
          children: [
            {
              path: '',
              name: 'CATKEY业务流程介绍',
            },
            {
              path: '',
              name: '账号相关问题',
            },
          ],
        },
        {
          name: '支付相关问题',
          order: '3',
          path: '',
          children: [
            {
              path: '',
              name: '支付流程',
            },
            {
              path: '',
              name: '预定支付流程',
            },
          ],
        },
        {
          name: '其他',
          order: '4',
          path: '',
          children: [
            {
              path: '',
              name: 'bug反馈',
            },
            {
              path: '',
              name: '联系我们',
            },
          ],
        },
      ],
      menu: [
        {
          label: '猫猫市场',
          index: '/shop'
        },
        {
          label: '养猫指南',
          index: '/guide',
          subs: [
            {
              label: '猫猫信息',
              index: '/catinfo'
            },
            {
              label: '饲养指南',
              index: '/catinfo/feed'
            }
          ]
        },
        {
          label: '用品商城',
          index: '/goods'
        },
        {
          label: '猫猫护理',
          index: '/cater',
          subs: [
            {
              label: '生育预约',
              index: '/cater/beauty'
            },
            {
              label: '问诊预约',
              index: '/cater/diagnose'
            }
          ]
        },
        {
          label: '帮助中心',
          index: '/feedback'
        }
      ]
    };
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/less/common";

.feedback {
  height: 100%;

  .el-container {
    height: 100%;

    .el-aside {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      background-color: rgb(250, 249, 250);

      .el-menu {
        border-right: none;
        width: 100%;
      }
    }

    .el-main {
      padding: 0;

      .el-container {
        .el-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          box-shadow: 1px 1px 1px rgb(255, 0, 106);
          background-color: rgb(250, 249, 250);

          .left {
            font-size: 25px;
            font-weight: bolder;
          }
        }
      }
    }
  }
}

.el-form-item__content {
  display: flex;
  align-items: center;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  padding-left: 32px;

  img {
    height: 100px;
  }
}

.menu {
  border-bottom-color: #f9c3c5 !important;
}

.page {
  width: 100%;
  height: 100%;
}
</style>
